<script type="text/javascript">
var isSubmitAjax = true;
var jform = null;
var datagrid = null;

$(function(){
	jform = $("#enquiryForm").validate({
		submitHandler: function(form) {
			if(isSubmitAjax){
				datagrid.fnDraw();
			}else {
				form.submit();
			}
		}
	});

	datagrid = $("#datagrid").r9jasonDataTable({
		// online1DataTable extra params
		"idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
		"extraParam" : function(aoData){ // pass extra params to server
			aoData.push( { "name": "filterDistcode", "value": $("#search_distCode").val()  } );
		},
		"reassignEvent" : function(){ // extra function for reassignEvent when JSON is back from server
			reassignDatagridEventAttr();
		},

		// datatables params
		"bLengthChange": true,
		"bFilter": false,
		"bProcessing": true,
		"bServerSide": true,
        "bAutoWidth": false,
        "sScrollX": "100%",
        //"sScrollXInner": "150%",
		"sAjaxSource": "<?php echo url_for('finanaceList/ecashWithdrawList') ?>",
		"sPaginationType": "full_numbers",
		"aoColumns": [
		              { "sName" : "dist.f_id", "bVisible" : false},
		              { "sName" : "dist.f_id",  "bSortable": false, "fnRender": function ( oObj ) {
                          $("#dgAddPanel").data("data_" + oObj.aData[0], {
                                f_id : oObj.aData[0]
                                , dist_code : oObj.aData[2]
                                , dist_name : oObj.aData[3]
                                , f_deduct : oObj.aData[4]
                                , f_amount : oObj.aData[5]
                                , f_status : oObj.aData[6]
                                , f_created_datetime : oObj.aData[7]
                                , user_name : oObj.aData[8]
                                , f_action_datetime : oObj.aData[9]
                          });
		  				  return "<a id='editLink' href='#'>Edit</a>";
		  				}},
		              { "sName" : "tblDist.f_code",  "bSortable": true},
		              { "sName" : "tblDist.f_name",  "bSortable": true},
		              { "sName" : "tblWithdraw.f_deduct",  "bSortable": true},
		              { "sName" : "tblWithdraw.f_amount",  "bSortable": true},
		              { "sName" : "tblWithdraw.f_status",  "bSortable": true},
		              { "sName" : "tblWithdraw.f_created_datetime",  "bSortable": true},
		              { "sName" : "tblDist.f_username",  "bSortable": true},
		              { "sName" : "tblWithdraw.f_action_datetime",  "bSortable": true}
		]
	});

}); // end $(function())

//all event in detail datagrid need to reassign because, every remote call, the DOM will be restructure again.
function reassignDatagridEventAttr(){
	$("a[id=editLink]").click(function(event){
		// stop event
		event.preventDefault();

		// event.target is <a> itself, parent() is <td>, while parent().parent() get <tr>
		//var id = alert("id = " +$(event.target).parent().parent().attr("id"));
		var id = $(event.target).parent().parent().attr("id");
        $("#dgAddPanelId").val(id);
        $("#dgAddPanel").dialog("open");
	});
}

</script>

<?php echo form_tag('fianance/ecashWithdrawal', 'id=loginForm') ?>
<div style="padding: 10px; top: 30px; position: absolute; width: 1100px">
<div class="portlet">
    <div class="portlet-header">Ecash Withdrawal Listing</div>
    <div class="portlet-content">
	<table width="100%" border="0">
		<tr>
			<td>
			<table width="100%">
				<tr>
					<td>
                    <div style="width: 1000px">
					<table class="display" id="datagrid" border="0" width="100%">
                        <thead>
                            <tr>
								<th>id [hidden]</th>
                                <th>&nbsp;</th>
								<th>Distributor Code</th>
								<th>Distributor Name</th>
								<th>Deduct Amount</th>
								<th>Withdraw Amount</th>
								<th>Status</th>
								<th>Created Datetime</th>
								<th>Handle By</th>
								<th>Updated Datetime</th>
							</tr>
                            <tr>
                                <td></td>
                                <td></td>
								<td><input title="" size="10" type="text" id="search_distCode" value="" class="search_init"/></td>
								<td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td><input title="" size="10" type="text" id="search_userName" value="" class="search_init"/></td>
                                <td></td>
							</tr>
                        </thead>
                    </table>
                    </div>
					</td>
				</tr>
			</table>
			</td>
		</tr>
	</table>
    </div>
</div>
</div>

</form>